<template>
  <div class="subscribe-creator">
    <EncryptImage class="img" :src="currCreator.avatar" :height="132" object-fit="cover"></EncryptImage>
    <div class="content gap-col-8">
      <div class="info">
        <p>{{ $t('label.message.subscribe', { nickname: currCreator.nickname }) }}</p>
        <p>
          <span class="origin-price">
            {{ $t('label.message.subOrig', { dollarSign: '$', price: currCreator.subscribe_price }) }}
          </span>
          <span class="price">{{ `$${item.price}` }}</span>
        </p>
      </div>
      <div class="actions">
        <button
          v-show="currCreator.is_subscribe"
          class="sub-btn paid font-size-14 font-weight-500 primary-gradient line-height-125"
        >
          {{ $t('common.subscribeSucceed') }}
        </button>
        <button
          v-show="!currCreator.is_subscribe"
          class="sub-btn font-size-14 font-weight-500 primary-gradient line-height-125"
          @click="() => $emit('click:subscribe', item)"
        >
          {{ $t('common.gotoPay') }}
        </button>

        <button
          class="creator-btn font-size-14 font-weight-500 line-height-125"
          @click="() => $emit('click:creator', { aff: currCreator.aff, username: currCreator.username })"
        >
          {{ $t('common.watchCreatorPage') }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useCreatorStore } from '@/store/creator'
import EncryptImage from '@/components/multimedia/EncryptImage.vue'

const props = defineProps({
  text: { type: String, required: true },
  item: { type: Object, required: true },
  self: { type: Boolean, default: false },
})

defineEmits(['click:subscribe', 'click:creator'])

const creatorStore = useCreatorStore()
const { getCreator } = creatorStore
const currCreator = ref({})

onMounted(async () => {
  currCreator.value = await getCreator(props.item.author.aff)
})
</script>

<style lang="scss" scoped>
.subscribe-message {
  width: fit-content;
  padding: 0.5rem 1rem;
  background: rgb(var(--v-theme-primary-gray));
  border-radius: 0.25rem 1rem 1rem;

  &.self {
    background: rgb(var(--v-theme-primary));
    border-radius: 1rem 0.25rem 1rem 1rem;
  }
}

.subscribe-creator {
  width: fit-content;
  background: rgb(var(--v-theme-primary-gray));
  border-radius: 1rem 1rem 1rem 1rem;

  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;

  .img {
    border-radius: 1rem 1rem 0rem 0rem;
  }

  .content {
    padding: 0.5rem;
    width: 100%;

    .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .origin-price {
        text-decoration: line-through;
        font-size: 0.6875rem;
        font-weight: 300;
        line-height: 1rem;
      }

      .price {
        margin-left: 0.25rem;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.25rem;
      }
    }

    .actions {
      .sub-btn {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border-radius: 1.25rem;
        white-space: nowrap;

        &.paid {
          opacity: 0.5;
        }
      }
      .creator-btn {
        width: 100%;
        padding: 0.625rem 0rem;
      }
    }
  }
}
</style>
